<template>
  <div id="app">
    <!-- 导航组件。可以改变浏览器的地址 -->
    <!-- 声明式导航 -->
    <router-link to="/discover">发现</router-link>
    &nbsp;
    <router-link to="/friend">朋友</router-link>
    &nbsp;
    <router-link to="/playList">歌单</router-link>
    &nbsp;
    <router-link to="/list">列表页</router-link>
    &nbsp;
    <router-link to="/vuex">计数器</router-link>
    &nbsp;
    <router-link to="/cart">cart</router-link>
    &nbsp;
    <!-- <router-link to="/detail">详情页</router-link> -->
    <button @click="jump">点击显示详情</button>

    <router-view></router-view>
    <router-view name="fri"></router-view>
    <router-view name="other"></router-view>


  </div>
</template>
 <script>
 export default {
   methods: {
     jump() {
       // 方法：
       // push-->跳转页面并且将历史记录添加到记录栈[baidu.com,google.com]
       // this.$router.push('/路径'，{携带参数})
       // this.$router.push({name:xxx},{})
 
       // 用法：
       // this.$router.push('/playlist')
       this.$router.push({ name: 'radioV' })
 
       // query传参：
       // this.$router.push({path:'/playList',query:{name:"wq"}})
 
       // params传参：只能使用name进行跳转，使用
       // params传参问题：刷新页面，params参数会丢失
       // 解决方法：用query,或者将params存储到本地
 
       // replace-->跳转页面，会替换上一个历史记录 google.com
       // go-->跳到哪个记录(每次以自己为基础)
       // back-->返回上一个历史记录
       // forward-->前进一个历史记录
     }
   }
 }
 </script>

